<!--
功能：申请批准,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/1 12:14,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="apple-nave">
      <div class="title" v-for="t in nave"
           :key="t.id"
           :class="t.id==op2? 'title-bb':''"
           @click="handle(t)">
        <span><i :class="t.icon"></i></span>
        <span>{{t.name}}</span>
      </div>
    </div>
    <div class="apply-box">
      <!--        动态组件-->
      <transition mode="out-in" name="t">
        <keep-alive>
          <component name="keep" :is="apples[op2-1]"></component>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
import Cost from "@/components/root/applys/Cost";
import Bedroom from "@/components/root/applys/Bedroom";
import Lost from "@/components/root/applys/Lost";
import Repair from "@/components/root/applys/Repair";
import {mapState} from "vuex";
export default {
  name: "Apply",
  data() {
    return {
      apples:["Cost","Repair","Lost","Bedroom"],
      nave:[{
        id:1,
        name:'生活缴费',
        icon:'el-icon-tickets'
      },{
        id:2,
        name:'物品报修',
        icon:'el-icon-tickets'
      },{
        id:3,
        name:'商品遗失',
        icon:'el-icon-tickets'
      },{
        id:4,
        name:'换寝申请',
        icon:'el-icon-tickets'
      }]
    };
  },
  components: {
    Cost,
    Bedroom,
    Lost,
    Repair
  },
  computed: {
    ...mapState(["op2"])
  },
  mounted() {

  },
  methods: {
    handle(t){
      this.$store.commit("setOp2",t.id)
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

.apply-box{
  width: 100%;
  min-height: 535px;
  margin-top: 40px;
}


/*导航栏*/
.apple-nave{
  width: 100%;
  margin-top: 65px;
  display: flex;
  font-size: 25px;
  justify-content: space-around;
  height: 50px;
}
.title{
  letter-spacing: 3px;
  cursor: pointer;
  color: #6E6E6E;
}
.title-bb{
  color: #000;
  border-bottom: 2px solid #6E6E6E;
}



/**/


/*动画*/
.t-enter,
.t-leave-to {
  opacity: 0;
}
.t-enter-active,
.t-leave-active {
  transition: all 0.4s;
}
</style>
